@mixin font($a, $b, $c) {
  font-size: $a;
  color: $b;
  text-align: center;
  width: 100%;
  margin-bottom: $c;
}

.banner {
  width: 100%;
  height: 500px;
  // background-color: pink;
  position: relative;
  .banner_box {
    left:50%;
    margin-left:-960px;
    // margin: auto;
    width: 1920px;
    height: 500px;
    position: relative;
    overflow: hidden;
    .banner_lists {
      position: absolute;
      left: 0;
      height: 100%;
      width: 9600px;
      display: flex;     
      .banner_item{
        width: 1920px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    span{
      display: block;
      width: 30px;
      height: 60px;
      text-align: center;
      font-size: 25px;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      background-color: rgba(0, 0, 0, 0.5);
      color: aliceblue;
      line-height: 60px;
      cursor: pointer;
    }
    .banner_prev {
      left: 0;
    }
    .bannner_next {
      right: 0;
    }
    ol {
      width: 100%;
      position: absolute;
      bottom: 0px;
      display: flex;
      justify-content: center;
      li {
        background-color: rgba(102,102,102,0.5);
        border-radius:10px;
        width: 20px;
        height: 20px;
        margin: 10px;
      }
      .active{
        background-color: #fff;
      }
    }
   
  }
}



main {
  height: 100%;
  .wrapper {
    height: 100%;
    .floor1 {
      width: 100%;
      ul {
        margin-top: 10px;
        width: 100%;
        display: flex;
        li {
          flex: 1;
          margin-right: 12px;
          img {
            display: block;
          }
        }
      }
    }

    .floor2 {
      margin-top: 78px;
      width: 100%;
      h2 {
        @include font(40px, #333, 10px);
        font-weight: 200;
      }
      p {
        @include font(14px, #999, 72px);
      }
      ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        div {
          width: 594px;
          // height: 722px;
          background-color: #ffffff;
          a {
            position: relative;
            span {
              display: block;
              font-size: 13px;
              height: 24px;
              line-height: 24px;
              background-color: #f60;
              color: #fff;
              padding: 0 10px;
              text-align: center;
              position: absolute;
              right: 0;
            }
          }
          h3 {
            @include font(14px, #333, 0px);
            font-weight: 500;
            margin-top: 28px;
            height: 21px;
          }
          .content {
            @include font(12px, #999, 13px);
          }
          .price {
            @include font(14px, #f60, 32px);
          }
        }
        div:nth-of-type(1) {
          margin-right: 12px;
        }
        div:nth-of-type(2) {
          display: flex;
          flex-wrap: wrap;
          background-color: #f4f4f4;
          li {
            flex: 1;
            background-color: #ffffff;
          }
          li:nth-of-type(1) {
            width: 100%;
            margin-bottom: 12px;
          }
          li:nth-of-type(2) {
            margin-right: 12px;
          }
        }
      }
    }

    .floor3 {
      margin-top: 78px;
      width: 100%;
      h2 {
        @include font(40px, #333, 10px);
        font-weight: 200;
      }
      p {
        @include font(14px, #999, 72px);
      }
      ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        div {
          width: 594px;
          // height: 722px;
          background-color: #f4f4f4;
          a {
            position: relative;
            span {
              display: block;
              font-size: 13px;
              height: 24px;
              line-height: 24px;
              background-color: #f60;
              color: #fff;
              padding: 0 10px;
              text-align: center;
              position: absolute;
              right: 0;
            }
          }
          h3 {
            @include font(14px, #333, 0px);
            font-weight: 500;
            margin-top: 28px;
            height: 21px;
          }
          .content {
            @include font(12px, #999, 13px);
          }
          .price {
            @include font(14px, #f60, 32px);
          }
        }
        div:nth-of-type(1) {
          display: flex;
          margin-right: 12px;
          flex-wrap: wrap;
          li {
            flex: 1;
            background-color: #ffffff;
          }
          li:nth-of-type(1) {
            width: 100%;
            margin-bottom: 12px;
          }
          li:nth-of-type(2) {
            margin-right: 12px;
          }
        }
        div:nth-of-type(2) {
          display: flex;
          flex-wrap: wrap;
          li {
            flex: 1;
            background-color: #ffffff;
          }
          li:nth-of-type(3) {
            width: 100%;
            margin-top: 12px;
          }
          li:nth-of-type(1) {
            margin-right: 12px;
          }
        }
      }
    }

    .floor4 {
      margin: 78px 0;
      width: 100%;
      h2 {
        @include font(40px, #333, 10px);
        font-weight: 200;
      }
      p {
        @include font(14px, #999, 72px);
      }
      ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        div {
          // width: 594px;
          // height: 722px;
          background-color: #f4f4f4;
          a {
            position: relative;
            span {
              display: block;
              font-size: 13px;
              height: 24px;
              line-height: 24px;
              background-color: #f60;
              color: #fff;
              padding: 0 10px;
              text-align: center;
              position: absolute;
              right: 0;
            }
          }
          h3 {
            @include font(14px, #333, 0px);
            font-weight: 500;
            margin-top: 28px;
            height: 21px;
          }
          .content {
            @include font(12px, #999, 13px);
          }
          .price {
            @include font(14px, #f60, 32px);
          }
        }
        div:nth-of-type(1) {
          display: flex;
          width: 291px;
          
          flex-wrap: wrap;
          li {
            flex: 1;
            background-color: #ffffff;
          }
          li:nth-of-type(1) {
            width: 100%;
            margin-bottom: 12px;
          }
        }
        div:nth-of-type(2){
          background-color: #ffffff;
          margin: 0 12px;
        }
        div:nth-of-type(3) {
          display: flex;
          flex-wrap: wrap;
          width: 291px;
          li {
            flex: 1;
            background-color: #ffffff;
            img{
              width: 291px;
              height:228px;
            }
          }
          li:nth-of-type(1) {
            width: 100%;
            margin-bottom: 12px;
          }
        }
      }
    }
  }
}

.common_widget{
  position: fixed;
  right: 50px;
  bottom: 0;
  width: 62px;
  a{
    display: block;
    width: 100%;
    height: 64px;
    background-color: #404040;
    cursor: pointer;
    overflow: hidden;
    i{
      display: block;
      font-size: 40px;
      width: 40px;
      height: 64px;
      line-height:64px;
      margin: auto;
      color: #fff;
    }
  }
  a:nth-of-type(1){
    margin-bottom:1px
  }
}
